<template>
	<div class="app-contain" v-show="showLogin">
		<div class="bMask" @click="closeDialog"></div>
		<div class="dialogWrap" style="top: 320px; margin-left: -180px;">
			<div class="dialog-ele">
				<h4 class="d-s-head pr" style="width: 320px;"><a href="javascript:void(0)" title="关闭" class="dClose icon16 pa" @click="closeDialog">&nbsp;</a><span id="d-s-head-tab" class="d-s-head-tab"><a href="javascript:void(0)" class="current">登录</a><!--<a href="javascript:void(0)">注册</a>--></span></h4>
				<div class="of">
					<div id="lrEleWrap" class="mt10 mb20 ml20 mr20">
						<div id="d-s-head-cont" class="lrWrap">
							<section class="dis e-login-ele">
								<div class="mt10 undis" id="error_div">
									<p class="e-l-jy">
										<font class="fsize12 c-red">用户名和密码不匹配！</font>
									</p>
								</div>
								<div>
									<ol class="e-login-options">
										<li>
											<input id="u-email" type="text" placeholder="请输入用户名/邮箱/手机号" v-model="loginForm.mobile">
											<p class="lr-tip-wrap"><span class="c-red" v-show="showValidateMobile"><em class="icon18 login-err-icon">&nbsp;</em>请输入正确的用户名/邮箱/手机号！</span></p>
										</li>
										<li>
											<input id="u-password" type="password" placeholder="请输入密码" maxlength="20" v-model="loginForm.password">
											<p class="lr-tip-wrap"><span class="c-red" v-show="showValidatePass"><em class="icon18 login-err-icon">&nbsp;</em>请输入正确的密码！</span></p>
										</li>
									</ol>
									<section class="hLh30 of"><span><router-link class="vam ml10 c-master" to="/forgetPassword">忘记密码？</router-link></span></section>
									<section class="mt20 tac">
										<a href="javascript: void(0)" title="登 录" class="e-login-btn" @click="login">登 录</a>
									</section>
								</div>
							</section>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { validateMobile } from '@/utils/validate'
	export default {
		name: 'loginPopup',
		data() {
			return {
				loginForm:{
					mobile:"",
					password:"",
					loginFrom:'WEB'
				},
				showValidateMobile:false,
				showValidatePass:false,
				isCurrentHtml:true
			}
		},
		watch:{
			showLogin:function(){
				if(this.showLogin){
					this.isCurrentHtml = true;
				}else{
					this.isCurrentHtml = false;
				}
			}
		},
		props:["showLogin"],
		mounted(){
			var that = this;
			this.isCurrentHtml = true;
			document.onkeydown=function(evt){
				let events = window.event || evt;
				var key= events.keyCode;
				if(key==13&&that.isCurrentHtml){
					that.login();
				}
			}
		},
		
		methods:{
			closeDialog() {
				this.$emit("closeDiag", false);
			},
			login(){
				if(this.loginForm.mobile == "") {
					this.showValidateMobile = true;
					return false;
				};
				if(this.loginForm.password == "") {
					this.showValidateMobile = false;
					this.showValidatePass = true;
					return false;
				};
				this.$store.dispatch('Login', this.loginForm).then(() => {
					let userInfo = this.$store.getters.getStorageInfo;
					if(userInfo){
						this.closeDialog();
					}	
				}).catch(() => {
	
				})	
			}
			
		},
		beforeRouteLeave(to, from, next) {

			this.isCurrentHtml = false;
			next();
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	
</style>